<script setup lang="ts">
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'
import { SearchTable } from '@fl/components'
import { cloneDeep } from 'lodash-es'
import { reactive } from 'vue'
import { useSortDelete, useSortIndex, useSortMove, useSortSwitchShow, useSortSwitchStatus } from '@fl/api/advertising-api/flash-management'
import addOrEditBox from './add-sort.vue'

const tableRef = ref()
const lastPage = ref<number>()
const lastOne = ref<number>()

const visible = ref<boolean>(false)
const editId = ref<string>('')

// 搜索条件、分页参数
const tablePage = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
const initialPage = toRaw({ ...tablePage.value })

// 查询列表
const params = computed(() => ({
    pageNum: tablePage.value.currentPage,
    pageSize: tablePage.value.pageSize,
}))
const { data, isLoading } = useSortIndex(params)
const records = ref()
watchEffect(() => {
    if (data.value) {
        records.value = cloneDeep(data.value?.records).reduce((pre, cur, index) => {
            cur.tempSort = index + 1
            pre.push(cur)
            return pre
        }, [])

        tablePage.value.total = data.value.total!
        lastPage.value = Math.ceil(data.value.total / tablePage.value.pageSize)
        lastOne.value = data.value.total % tablePage.value.pageSize
    }
})

// 新增
function goToAdd() {
    visible.value = true
}

// 上移、下移
const { mutate: moveMutate } = useSortMove()
function moveItem(row: any, type: string) {
    const params = {
        id: row.id,
        type,
    }
    moveMutate(params, {
        onSuccess: () => {
            ElMessage.success('操作成功')
        },
    })
}

// 切换展示
const { mutate: switchShowMutate } = useSortSwitchShow()
function switchShow(row: any) {
    switchShowMutate(row.id, {
        onSuccess: () => {
            ElMessage.success('操作成功')
        },
    })
}

// 切换状态
const { mutate: switchStatusMutate } = useSortSwitchStatus()
function switchStatus(row: any) {
    switchStatusMutate(row.id, {
        onSuccess: () => {
            ElMessage.success('操作成功')
        },
    })
}

// 列表：编辑
function goToEdit(row: any) {
    visible.value = true
    editId.value = row?.id
}

// 列表：删除
const { mutate: deleteMutate } = useSortDelete()
function deleteConfirm(row: any) {
    deleteMutate(row.id, {
        onSuccess: () => {
            ElMessage.success('操作成功')
        },
    })
}

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}

const gridOptions = reactive<VxeGridProps>({
    columns: [
        { title: '序号', type: 'seq', width: 70 },
        { field: 'classifyName', title: '快讯分类' },
        { field: 'cityName', title: '所属城市' },
        { field: 'orderFlag', title: '排序' },
        { field: 'showFlag', slots: { default: 'showFlag' }, title: '展示' },
        { field: 'delFlag', slots: { default: 'delFlag' }, title: '状态' },
        { slots: { default: 'operate' }, title: '操作', width: 250 },
    ],
})
</script>

<template>
    <ElCard shadow="never">
        <SearchTable ref="tableRef"
                     v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :loading="isLoading"
                     :data="records"
                     :height="626"
                     @page-change="handlePageChange"
        >
            <template #showFlag="{ row }">
                <!-- active-text="是" inactive-text="否" -->
                <el-switch v-model="row.showFlag"
                           active-value="1"
                           inactive-value="0"
                           inline-prompt
                           @change="switchShow(row)"
                />
            </template>

            <template #delFlag="{ row }">
                <!-- active-text="展示" inactive-text="隐藏" -->
                <el-switch v-model="row.delFlag"
                           active-value="1"
                           inactive-value="0"
                           inline-prompt
                           @change="switchStatus(row)"
                />
            </template>

            <template #toolbar_buttons>
                <ElButton type="primary"
                          @click="goToAdd"
                >
                    <div class="i-ic:baseline-add size-16" />
                    新增
                </ElButton>
            </template>

            <template #operate="{ row }">
                <el-button class="small"
                           text
                           :disabled="row.tempSort === 1 && tablePage.currentPage === 1"
                           @click="moveItem(row, 'up')"
                >
                    上移
                </el-button>

                <el-button class="small"
                           text
                           :disabled="tablePage.currentPage === lastPage && row.tempSort === lastOne"
                           @click="moveItem(row, 'down')"
                >
                    下移
                </el-button>

                <el-button class="small"
                           type="primary"
                           text
                           @click="goToEdit(row)"
                >
                    编辑
                </el-button>

                <el-popconfirm title="确认删除吗？"
                               @confirm="deleteConfirm(row)"
                >
                    <template #reference>
                        <el-button class="small"
                                   text
                                   type="warning"
                        >
                            删除
                        </el-button>
                    </template>
                </el-popconfirm>
            </template>
        </SearchTable>
    </ElCard>

    <addOrEditBox v-model:visible="visible"
                  v-model:id="editId"
    />
</template>

<style lang="scss" scoped>
:deep(.small.el-button) {
    padding: 4px;
    margin-left: 6px;
}
</style>
